<template>
  <el-dialog :title="textInfo.text" :visible.sync="dialogFormVisible">
    <el-form
      ref="addEmployeeRef"
      :model="formInfo"
      :rules="rules"
      size="medium"
      label-width="120px"
    >
      <el-form-item label="所属学科" prop="subject">
        <el-select
          v-model="formInfo.subjectID"
          placeholder="请选择"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in subjectOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目录名称" prop="directoryName">
        <el-input
          v-model="formInfo.directoryName"
          placeholder="请输入目录名称"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="dialogFormH">取消</el-button>
      <el-button type="primary" @click="handelConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { simple, add, update } from '@/api/hmmm/directorys.js'
export default {
  name: 'DirectorysAdd',
  props: {
    textInfo: {
      type: Object,
      required: true
    },
    // 点击修改数据得到的值
    formInfo: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      rules: {
        subjectID: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        directoryName: [{
          required: true,
          message: '请输入目录名称',
          trigger: 'blur'
        }]
      },
      subjectOptions: undefined,
      dialogFormVisible: false
    }
  },
  created () {
    this.getName()
  },
  methods: {
    // 弹层显示
    dialogFormV () {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false
    },
    // 新增内,获取目录的名称
    async getName () {
      const { data } = await simple()
      // console.log(data)
      this.subjectOptions = data
    },
    onClose () {
      this.$emit('dialogChange', false)
      this.$refs.addEmployeeRef.resetFields()
    },
    // 表单提交
    handelConfirm () {
      this.$refs.addEmployeeRef.validate(async valid => {
        if (valid) {
          this.dialogFormH()
          // 有id即修改
          const data = {
            ...this.formInfo
          }
          if (this.formInfo.id) {
            // console.log(this.formInfo)
            await update(data).then(() => {
              this.$emit('newFormData', this.formInfo)
            })
          } else {
            await add(this.formInfo).then(() => {
              this.$emit('newFormData', this.formInfo)
            })
          }
          this.$message.success('添加信息成功')
        } else {
          this.$message.error('添加信息失败')
        }
      })
    }
  }
}
</script>

<style scoped lang='less'></style>

